<template>
  <div class="order">
    <div class="sure">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <span>确认订单</span>
    </div>
    <div class="icon">
      <img src="../../assets/images/order/a.webp" alt="" />
      <div class="phone">
        <span>aaaaa13097456789</span>
        <p>辽宁省 沈阳市 铁西区 333</p>
      </div>
    </div>
    <div class="flex">
      <img src="../../assets/images/order/b.jpg" alt="" />
      <span>欣儿鞋铺</span>
    </div>
    <div class="bai">
      <img src="../../assets/images/order/c.jpg" alt="" />
      <div class="right">
        <p class="p1">
          包头拖鞋女夏季新款网红性感尖头水钻外穿猫跟凉拖鞋时尚百搭女鞋
        </p>
        <div class="riv">
          <div class="left">
            <p class="p2">原价：￥138.00</p>
            <p class="p3">七天退换</p>
          </div>
          <div>
            <div class="right1">
              <p class="p4">￥49.9</p>
              <p class="p5">x1</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yun">
      <div class="im1">
        <img src="../../assets/images/order/d.png" alt="" />
        <div class="im2">
          <h3>运费险</h3>
          <p>确认收货前退货可理赔</p>
        </div>
      </div>
      <div class="mon">
        <p>￥15.00</p>
        <p>x1</p>
      </div>
    </div>
    <div class="bun">
      <div class="l1">
        <div class="l2">
          <p>商品总价</p>
          <span class="sp1">￥69.00</span>
        </div>
        <div class="l3">
          <p>运费（快递）</p>
          <span class="sp2">￥0.00</span>
        </div>
        <div class="l4">
          <p>运费险（卖家赠送）</p>
          <span class="sp3">￥0.00</span>
        </div>
      </div>
    </div>
    <div class="mall">
      <h3>商品小计</h3>
      <span>￥69.30</span>
    </div>
    <div class="fot">
        <span>应付金额：</span>
        <span>￥69.30</span>
        <span class="f3">共计：</span>
        <span>x1件</span>
        <span class="f4"  @click="$router.push('/pay')">去支付</span>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
          news:[],
    };
  },
 created(){
    
 }
};
</script>
 
<style lang="less" scoped>
.order {
  width: 100vw;
  .sure {
    width: 100vw;
    height: 43px;
    border: 1px solid #ccc;
    i {
      margin-left: 1.333333vw;
      line-height: 43px;
    }
    span {
      margin-left: 38vw;
    }
  }
  .icon {
    display: flex;
    margin-top: 2.666667vw;
    margin-left: 2.133333vw;
    img {
      width: 5.333333vw;
      height: 40px;
    }
    .phone {
      margin-left: 20px;
      line-height: 20px;
      font-size: 14px;
      color: #333;
    }
  }
  .flex {
    img {
      width: 25px;
      height: 25px;
      margin-left: 2.333333vw;
      margin-top: 4vw;
    }
    span {
      display: inline-block;
      font-size: 14px;
      color: #333;
      margin-left: 1vw;
    }
  }
  .bai {
    margin-top: 8vw;
    display: flex;
    img {
      margin-left: 2.333333vw;
      margin-right: 1.333333vw;
    }
    .p1 {
      font-size: 13px;
      color: #333;
      font-weight: 700;
    }
    .p2 {
      color: #999;
      margin: 2.333333vw 0.333333vw;
    }
    .p3 {
      border: 1px solid #ff5306;
      color: #ff5306;
      font-size: 13px;
      border-radius: 3px;
      background: #fff1ec;
      padding: 2px 5px;
      width: 11vw;
      text-align: center;
      margin-top: 5vw;
    }
  }
  .riv {
    display: flex;
    .right1 {
      margin-left: 36.933333vw;
      margin-top: 3vw;
    }
  }
  .yun {
    margin-top: 5.666667vw;
    display: flex;
    img {
      width: 25px;
      height: 25px;
      margin-left: 2.333333vw;
      margin-right: 1.333333vw;
      margin-top: 1.333333vw;
    }
    .im1 {
      display: flex;
    }
    .im2 {
      h3 {
        font-weight: 700;
      }
      p {
        color: #9999;
        margin-top: 10px;
      }
    }
    .mon {
      margin-left: 43vw;
    }
  }
  .bun {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-left: 2.333333vw;
    margin-top: 2.666667vw;
    padding-bottom: 2.8vw;
    padding-top: 2.8vw;
    color: #999;
    line-height: 18px;
    margin-bottom: 10px;
    span {
      margin-left: 61.333333vw;
      text-align: left;
    }
    .sp3 {
      margin-left: 52.333333vw;
    }
    .sp1 {
      margin-left: 67.333333vw;
    }
    .l2 {
      display: flex;
    }
    .l3 {
      display: flex;
    }
    .l4 {
      display: flex;
    }
  }
  .mall {
    display: flex;
    margin-left: 2.333333vw;
    margin-top: 2.666667vw;
    h3 {
      font-size: 2.866667vw;
    }
    span{
        margin-left: 68.133333vw;
    }
  }
  .fot{
  height: 40px;
//   border: 1px solid rgba(0, 0, 0, .2);
//   border-bottom: 1px solid rgba(0, 0, 0, .2);
  margin-top: 70px;
  background-color: #fff;
  line-height: 40px;
  }
  span{
      margin-left:2.333333vw; 
      font-size: 14px;
      color:#333;
  }
  .f3{
      margin-left: 2.666667vw;
  }
  .f4{
      float:right;
      width: 91px;
      height: 40px;
      background-color: red;
      text-align: center;
      line-height: 40px;
      color:#fff;
  }
}
</style>